<template>
	<view>
		<tm-message ref="toast"></tm-message>
		<uni-forms class="form_main">
			<view class="text-center" style="overflow: hidden;">
				<image src="../static/logo/76x76.png" style="width: 76px;height: 76px;"></image>
			</view>
			<view class="padding text-blue text-xl text-bold text-center">
				你好，开发者！
			</view>
			<view class="inputContainer">
				<view class="lynhng-icon li-aite li-size-16 inputIcon"></view>
				<input placeholder="Username" id="username" class="inputField" v-model="loginForm.username" type="text">
			</view>
			<view class="inputContainer">
				<view class="lynhng-icon li-password li-size-16 inputIcon"></view>
				<input placeholder="Password" id="password" class="inputField" v-model="loginForm.password"
					type="password">
			</view>

			<button id="button" class="submit-button" @click="handleLogin">登录</button>
			<view class="signupContainer">
				<p>还没有账号?</p>
				<a href="#">注 册</a>
			</view>
		</uni-forms>

		<view class="normal-login-container" v-if="false">
			<button class="logo-button">
				<view class="bloom-container">
					<view class="button-container-main">
						<view class="button-inner">
							<view class="back"></view>
							<view class="front">
								<image style="width: 100rpx;height: 100rpx;background: transparent;"
									:src="globalConfig.appInfo.logo" mode="widthFix"></image>
							</view>
						</view>
						<view class="button-glass">
							<view class="back"></view>
							<view class="front"></view>
						</view>
					</view>
				</view>
			</button>
		</view>
		<view v-if="false">
			<button @click="handleLogin" class="action-button">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		getCodeImg
	} from '@/api/login';
	import {
		generateUuid
	} from '@/utils/common'

	export default {
		data() {
			return {
				codeUrl: "",
				captchaEnabled: false,
				// 用户注册开关
				register: false,
				globalConfig: getApp().globalData.config,
				setBaseUrl: getApp().globalData.config.setBaseUrl,
				uniCloud: getApp().globalData.config.uniCloud,
				baseUrlList: [],
				newBaseUrl: null,
				loginForm: {
					username: "admin",
					password: "osbitcn"
				},
				loading: false,
				isOpened: 'right',
				swipeOption: [{
					text: '删除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}]
			}
		},
		created() {
			// 全局配置
			// console.log(getApp().globalData)
			// this.getBaseUrlFromCloud();
		},
		methods: {
			getBaseUrlFromCloud() {
				var that = this;
				if (this.uniCloud) {
					this.loading = true;
					this.$cdb.collection('base_url_config').get().then((res) => {
						// res 为数据库查询结果
						if (res.result.data) {
							this.baseUrlList = res.result.data;
						}
						this.loading = false;
					}).catch((err) => {
						console.log(err.errCode); // 打印错误码
						console.log(err.errMsg); // 打印错误内容
						this.loading = false;
						this.baseUrlList = [{
							_id: "0",
							uuid: "0",
							baseUrl: "http://127.0.0.1:80"
						}]
					})
				} else {
					uni.getStorage({
						key: "base_url_config",
						success(res) {
							console.log(res)
							if (res.data != "") {
								that.baseUrlList = res.data
							} else {
								that.baseUrlList = [{
									_id: "0",
									uuid: "0",
									baseUrl: "http://127.0.0.1:80"
								}]
								uni.setStorageSync("base_url_config", that.baseUrlList)
							}
						},
						fail() {
							that.baseUrlList = [{
								_id: "0",
								uuid: "0",
								baseUrl: "http://127.0.0.1:80"
							}]
							uni.setStorageSync("base_url_config", that.baseUrlList)
						}
					})
				}
			},
			toggle() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			addNewBaseUrl() {
				var that = this;
				if (this.newBaseUrl.length < 1) {
					return;
				}
				this.$refs.toast.show({
					model: 'success',
					label: this.newBaseUrl
				})
				let exited = false;
				// if (this.baseUrlList.length > 0) {
				this.baseUrlList.forEach(item => {
					if (item.baseUrl == this.newBaseUrl) {
						exited = true;
						// 重复
						return;
					}
				})
				// }
				if (!exited) {
					if (this.uniCloud) {
						this.$cdb.collection('base_url_config').add({
							"uuid": generateUuid(),
							"baseUrl": this.newBaseUrl
						}).then(res => {
							this.baseUrlList.push({
								"_id": res.result.id,
								uuid: generateUuid(),
								baseUrl: this.newBaseUrl
							});
						})
					} else {
						this.baseUrlList.push({
							"_id": generateUuid(),
							uuid: generateUuid(),
							baseUrl: this.newBaseUrl
						});
					}
					uni.setStorageSync("base_url_config", this.baseUrlList);
				}
				uni.setStorageSync("mcs_base_url", this.newBaseUrl);
				getApp().globalData.config.baseUrl = this.newBaseUrl;
				this.$refs.popup.close() // 关闭
				this.newBaseUrl = "";
			},
			removeBaseUrl(item, index) {
				this.baseUrlList.splice(index, 1);
				if (item.baseUrl == uni.getStorageSync("mcs_base_url")) {
					uni.removeStorageSync("mcs_base_url")
				}
				if (this.baseUrlList.length > 0) {
					uni.setStorageSync("mcs_base_url", this.baseUrlList[this.baseUrlList.length - 1].baseUrl)
				} else {
					uni.showToast({
						icon: 'error',
						title: "BaseUrl为空"
					})
				}
				if (this.uniCloud) {
					this.$cdb.collection('base_url_config').doc(item._id).remove()
				}
			},
			selectBaseUrl(url) {
				uni.setStorageSync("mcs_base_url", url);
				this.$refs.toast.show({
					model: 'success',
					label: url
				})
				this.$refs.popup.close() // 关闭
			},
			// 用户注册
			handleUserRegister() {
				this.$tab.redirectTo(`/pages/register`)
			},
			// 隐私协议
			handlePrivacy() {
				let site = this.globalConfig.appInfo.agreements[0]
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 用户协议
			handleUserAgrement() {
				let site = this.globalConfig.appInfo.agreements[1]
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 获取图形验证码
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.loginForm.uuid = res.uuid
					}
				})
			},
			// 登录方法
			async handleLogin() {
				if (this.loading) return;
				if (this.loginForm.username === "") {
					this.$refs.toast.show({
						model: 'warn',
						label: '请输入您的账号'
					})
				} else if (this.loginForm.password === "") {
					this.$refs.toast.show({
						model: 'warn',
						label: '请输入您的密码'
					})
				} else if (this.loginForm.code === "" && this.captchaEnabled) {
					this.$modal.msgError("请输入验证码")
				} else {
					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				var that = this;
				that.loading = true;
				that.$refs.toast.show({
					model: 'load',
					label: '正在登录..'
				})
				this.$store.dispatch('modules/user/Login', this.loginForm).then(() => {
					that.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					this.loading = false;
					this.$refs.toast.hide()
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				this.$refs.toast.show({
					model: 'success',
					icon: 'icon-wind-smile',
					label: '登录成功'
				})
				this.loading = false;
				setTimeout(() => {
					uni.$emit('loginUpdate', {
						msg: '登录完成'
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
	}

	.logo-image {
		margin-top: 40%;
	}

	.login-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			padding-top: 34%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px;
			margin-top: 15%;
			width: 66%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}

	}

	.set-base-url {
		z-index: 10;
		position: fixed;
		top: 15%;
		right: -48%;
		left: 0;
		margin: 0 auto;
		border: none;
		border-radius: 50%;
		width: 45px;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition-duration: .4s;
		cursor: pointer;
		// background: #f09433;
		background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
		overflow: hidden;
		color: white;
		text-align: center;

		.icon {
			font-size: 25px;
		}

		.text {
			display: block;
			font-size: 13px;
			margin: 8px 0px;
		}

		.set-text {
			position: absolute;
			color: rgb(255, 255, 255);
			width: 120px;
			font-weight: 600;
			opacity: 0;
			transition-duration: .4s;
		}

	}

	.set-base-url:hover {
		width: 110px;
		transition-duration: .4s;
		border-radius: 30px;
	}

	.set-base-url:hover .set-text {
		opacity: 1;
		transition-duration: .4s;
	}

	.set-base-url:hover .icon {
		opacity: 0;
		transition-duration: .3s;
	}

	.base-url-input {
		width: 70%;
		padding: 4px;
		font-size: 15px;
		color: black;
		border-top-left-radius: .5em;
		border-bottom-left-radius: .5em;
		border: 2px solid #fff;
		margin-top: -5px;
	}

	.base-url-button {
		border: none;
		background-color: #1363DF;
		font-size: 15px;
		width: 25%;
		color: #fff;
		height: fit-content;
		border-top-right-radius: .5em;
		border-bottom-right-radius: .5em;
		cursor: pointer;
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.login-footer {
		font-size: 14px;
		text-align: center;
		margin: 0 auto;
		position: absolute;
		bottom: 1rem;
		width: 100%;
	}

	.action-button {
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 2.5px;
		font-weight: 700;
		color: rgb(227, 92, 105);
		background-color: #fff;
		border: none;
		border-radius: 45px;
		box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease 0s;
		cursor: pointer;
		outline: none;
		width: 55%;
		margin-top: 50px;
		margin-right: 15%;
	}

	.action-button::after {
		border: none;
	}

	.action-button:active {
		transform: translateY(-1px);
	}

	.logo-button {
		background: none;
		border: none;
		margin-top: 40%;
	}

	.logo-button .bloom-container {
		position: relative;
		transition: all 0.2s ease-in-out;
		border: none;
		background: transparent;
		width: 110px;
	}

	.logo-button::after {
		border: none;
		display: none;
	}

	.logo-button .bloom-container .button-container-main {
		width: 110px;
		aspect-ratio: 1;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		display: grid;
		place-content: center;
		border-right: 5px solid white;
		border-left: 5px solid rgba(128, 128, 128, 0.147);
		transition: all 0.5s ease-in-out;
	}

	.logo-button .bloom-container .button-container-main .button-inner {
		height: 60px;
		aspect-ratio: 1;
		border-radius: 50%;
		position: relative;
		box-shadow: rgba(100, 100, 111, 0.5) -10px 5px 10px 0px;
		transition: all 0.5s ease-in-out;
	}

	.logo-button .bloom-container .button-container-main .button-inner .back {
		position: absolute;
		inset: 0;
		border-radius: 50%;
	}

	.logo-button .bloom-container .button-container-main .button-inner .front {
		position: absolute;
		inset: 5px;
		border-radius: 50%;
		display: grid;
		place-content: center;
	}

	.logo-button .bloom-container .button-container-main .button-glass {
		position: absolute;
		inset: 0;
		transform: translate(0%, -50%) rotate(0deg);
		transform-origin: bottom center;
		transition: all 0.5s ease-in-out;
	}

	.logo-button .bloom-container .bloom {
		height: 1px;
		width: 1px;
		position: absolute;
		background: white;
	}

	.logo-button .bloom-container:hover {
		transform: scale(1.1);
	}

	.form_main {
		width: 350px;
		align-items: center;
		margin: 25% auto;
		top: 0;
		bottom: 0;
		justify-content: center;
		padding: 30px 30px 30px 30px;
		border-radius: 15px;
	}

	.heading {
		font-size: 2.5em;
		color: #2e2e2e;
		font-weight: 700;
		margin: 15px 0 30px 0;
		text-align: center;
	}

	.inputContainer {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.inputIcon {
		position: absolute;
		left: 10px;
	}

	.inputField {
		width: 100%;
		height: 45px;
		background-color: transparent;
		border: none;
		border-bottom: 2px solid rgb(173, 173, 173);
		border-radius: 30px;
		margin: 10px 0;
		color: black;
		font-size: 1em;
		font-weight: 500;
		box-sizing: border-box;
		padding: 4px 4px 4px 30px;
	}

	.inputField:focus {
		outline: none;
		border-bottom: 2px solid rgb(199, 114, 255);
	}

	.inputField::placeholder {
		color: rgb(80, 80, 80);
		font-size: 1em;
		font-weight: 500;
	}

	.submit-button {
		position: relative;
		width: 56%;
		border: 2px solid #8000ff;
		background-color: #8000ff;
		height: 40px;
		color: white;
		font-size: 1em;
		font-weight: 500;
		letter-spacing: 1px;
		border-radius: 30px;
		cursor: pointer;
		overflow: hidden;
		margin: 12px auto;
	}

	.submit-button::after {
		content: "";
		position: absolute;
		background-color: rgba(255, 255, 255, 0.253);
		height: 100%;
		width: 150px;
		top: 0;
		left: -200px;
		border-bottom-right-radius: 100px;
		border-top-left-radius: 100px;
		filter: blur(10px);
		transition-duration: .5s;
	}

	.submit-button:hover::after {
		transform: translateX(600px);
		transition-duration: .5s;
	}

	.signupContainer {
		margin: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}

	.signupContainer p {
		font-size: 1em;
		font-weight: 500;
		color: black;
	}

	.signupContainer a {
		font-size: .8em;
		font-weight: 500;
		background-color: #2e2e2e;
		color: white;
		text-decoration: none;
		padding: 8px 15px;
		border-radius: 20px;
	}
</style>